<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>医院信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs :tab-position="tabPosition" class="demo-tabs">
      <el-tab-pane label="预约挂号">
        <div>
          <span class="guahao">{{ obj.hosname }}</span>
          <el-icon><Pointer /></el-icon
          ><span style="margin-right: 35px">{{ obj1.hostypeString }}</span>
        </div>
        <div class="yuyuedetail">
          <div class="yuyuelogo">
            <img :src="`data:image/jpeg;base64,${obj.logoData}`" alt="" />
          </div>
          <div class="yuyuegz">
            <p>挂号规则</p>
            <div>
              预约周期:{{ obj2.cycle }}天 放号时间:{{
                obj2.releaseTime
              }}
              停挂时间:{{ obj2.stopTime }}
            </div>
            <div>具体位置:{{ obj1.fullAddress }}</div>
            <div>具体路线:{{ obj.route }}</div>
            <div>退号时间:就诊前一工作日{{ obj2.quitTime }}前取消</div>
            <p>预约挂号规则</p>
            <div v-for="(item, index) in obj2.rule" :key="index">
              {{ item }}
            </div>
          </div>
        </div>
        <div class="kemulist">
          <div class="kemuleft">
            <div
              :class="cur == index ? 'ackemulb' : 'kemulb'"
              @click="hd(index)"
              v-for="(item, index) in arr"
              :key="index"
            >
              {{ item.depname }}
            </div>
          </div>
          <div class="kemuright">
            <div v-for="(item, index) in arr" :key="index">
              <div class="arr1">{{ item.depname }}</div>
              <div class="arr2">
                <div
                  v-for="(item1, index1) in item.children"
                  :key="index1"
                  @click="deptdj(item1)"
                >
                  {{ item1.depname }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="医院详情">
        <div>
          <span class="guahao">{{ obj.hosname }}</span>
          <el-icon><Pointer /></el-icon
          ><span style="margin-right: 35px">{{ obj1.hostypeString }}</span>
        </div>
        <div class="yuyuedetail">
          <div class="yuyuelogo">
            <img :src="`data:image/jpeg;base64,${obj.logoData}`" alt="" />
          </div>
          <div class="yuyuegz">
            <div>具体位置:{{ obj1.fullAddress }}天</div>
            <div>具体路线:{{ obj.route }}</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="预约通知">
        <div class="yytitle">{{ obj.hosname }}预约挂号须知</div>
        <div class="top">为方便您早日就医康复，请您认真阅读预约挂号须知:</div>
        <div class="info">
          <div class="tip">一、预约实名制：</div>
          <div class="text">
            统一平台电话预约和网上预约挂号均采取实名制注册预约，请您如实提供就诊人员的真实姓名、有效证件号（身份证、护照）、性别、手机号码、社保卡号等基本信息。
          </div>
        </div>
        <div class="info">
          <div class="tip">二、预约挂号：</div>
          <div class="text">
            按照北京市卫健委统一平台要求，预约挂号规则如下：
            在同一自然日，同一医院，同一科室，同一就诊单元，同一就诊人，可以预约最多1个号源；
            在同一自然周，同一就诊人，可以预约最多8个号源；
            在同一自然月，同一就诊人，可以预约最多12个号源；
            在同一自然季度，同一就诊人，可以预约最多24个号源。
          </div>
        </div>
        <div class="info">
          <div class="tip">三、取消预约：</div>
          <div class="text">
            已完成预约的号源，如需办理退号，至少在就诊前一工作日14:00前通过网站、微信公众号、114电话等平台预约渠道进行取消预约。
          </div>
        </div>
        <div class="info">
          <div class="tip">四、爽约处理：</div>
          <div class="text">
            如预约成功后患者未能按时就诊且不办理取消预约号视为爽约，同一患者在自然年内爽约规则如下：
            累计爽约3次，自3次爽约日起，90天内不允许通过114平台进行预约挂号；
            累计爽约6次，自6次爽约日起，180天内不允许通过114平台进行预约挂号。
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="停诊信息">
        <div class="yytitle">{{ obj.hosname }}停诊信息</div>
      </el-tab-pane>
      <el-tab-pane label="查询/取消">
        <div class="yytitle">{{ obj.hosname }}停诊信息</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style scoped>
.hosname {
  text-align: center;
  font-size: 30px;
}
.top {
  color: #7f7f7f;
  margin: 10px 0px;
}

.info {
}
.tip {
  color: red;
  font-weight: 900;
}
.text {
  color: #7f7f7f;
  margin: 10px 0px;
  line-height: 30px;
}
.yytitle {
  text-align: center;
  font-size: 30px;
}
.arr2 div {
  width: 33.3%;
  cursor: pointer;
  text-align: center;
  margin-bottom: 10px;
}
.arr2 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.arr1 {
  background-color: rgb(248, 248, 248);
  color: #7f7f7f;
  text-align: left;
}
.ackemulb {
  width: 100%;
  height: 40px;
  text-align: center;

  line-height: 40px;
  font-size: 14px;
  cursor: pointer;
  border-left: 1px solid red !important;
  color: red !important;
  background: white !important;
}
.kemulb {
  width: 100%;
  height: 40px;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
  background: rgb(248, 248, 248);
  color: #7f7f7f;
  font-size: 14px;
}
.kemuright {
  width: calc(100% - 80px);
  height: 477px;
  overflow: auto;
  float: left;
}
.kemuleft {
  width: 80px;
  height: auto;
  float: left;
}
.kemulist {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.yuyuelogo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.yuyuelogo {
  width: 80px;
  height: 80px;
  float: left;
}
.yuyuegz div {
  color: #7f7f7f;
}
.yuyuedetail {
  width: 100%;
  height: auto;
  padding-top: 15px;
  box-sizing: border-box;
  overflow: hidden;
}
.guahao {
  font-size: 30px;
  font-weight: 900;
}
p {
  margin: 0px;
}
.yuyuegz p {
}
.yuyuegz {
  width: calc(100% - 80px);
  padding-left: 15px;
  box-sizing: border-box;
  height: auto;
  float: right;
}
</style>
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import instance from "../assets/axios";
import {
  Clock,
  Check,
  Pointer,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
const obj = ref({});
const obj1 = ref({});
const obj2 = ref({});
const cur = ref(0);
const arr = ref([]);
const router = useRouter();
const deptdj = (item) => {
  if (window.localStorage.token) {
    console.log(item);
    router.push({
      path: "/about2",
      query: {
        hoscode: router.currentRoute.value.query.id,
        depcode: item.depcode,
      },
    });
  } else {
    alert("请先登录");
  }
};
const tabPosition = ref("left");
const hd = (index) => {
  cur.value = index;
  let cur1 = document.querySelectorAll(".arr1");
  console.log(cur1);
  cur1[cur.value].scrollIntoView({
    behavior: "smooth",
    block: "start",
  });
};
const getinfo = async () => {
  const res = await instance.get(
    `/api/hosp/hospital/${router.currentRoute.value.query.id}`
  );
  console.log(res);
  obj.value = res.data.hospital;
  obj1.value = res.data.hospital.param;
  obj2.value = res.data.bookingRule;
};
const getinfo1 = async () => {
  const res = await instance.get(
    `/api/hosp/hospital/department/${router.currentRoute.value.query.id}`
  );
  console.log(res);
  arr.value = res.data;
};
onMounted(() => {
  console.log(router.currentRoute.value.query.id);
  getinfo();
  getinfo1();
});
</script>